{% extends "base.html" %}
{% load staticfiles %}
{% block title %}home{% endblock %}
{% block content %}
    <!-- Top image -->
    <div class="wrap-1">
        <div class="container">
            <div class="col-md-7">
                <div class="w1-image top-content-1">
                    <img src="{% static 'images/mac1.png' %}">
                </div>
            </div>

            <div class="col-md-5">
                <div class="description text-center top-content-2">
                    <h2>
                        <i class="fa fa-video-camera"></i>
                        Video Convert
                    </h2>
                    <br>
                    <h5>
                        <p>
                            This web application is aim to convert video to different type of medias. You can simply using it through upload your video or paste a video link.
                        </p> 
                        <br>
                        <p>
                            Currently, this web application support convert video to <i>gif</i> and <i>small size video</i>.
                        </p>
                    </h5>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Convert Wrap -->
    <div class="wrap-2 container">
        <div class="file-uploader">
            <div class="file-uploader-header clearfix">
                <div class="col-md-12"> 
                    <button class="btn btn-purple upload-file-bottom">
                        <i class="fa fa-upload"></i>
                        Upload a File
                    </button>
                    <form id="upload-file-input-form" enctype="multipart/form-data" style="display: none;">
                        <input type="file" name="file" id="upload-file-input" accept="video/mp4"/>
                    </form>

                    <button class="btn btn-purple" data-toggle="modal" data-target="#video-add-link">
                        <i class="fa fa-external-link"></i>
                        Add a Link
                    </button>

                    <a class="btn btn-danger pull-right" href="http://www.sample-videos.com/" target="_blank">
                        <i class="fa fa-download"></i>
                        Test Video Download
                    </a>
                </div>
            </div>
            <div id="drag-file-container">
                <i class="fa fa-upload"></i>
                <span class="upload-text">Upload or drag your file, then click play button.</span>
            </div>

            <div class="video-container-wrap">
                <video id='video-prop' controls>
                    <source id='vp-mp4' src="" type='video/mp4'>
                </video>               
                <div id="player-youtube"></div>
                <div id="video-control-drag"></div>
            </div>


            <div class="file-uploader-footer clearfix">
                <div class="col-md-4">
                    <button class="btn btn-danger reset-video">
                        <i class="fa fa-times"></i>
                        Reset
                    </button>

                    <button class="btn btn-primary generate-video-gif" data-local-file="">
                        <i class="fa fa-gavel"></i>
                        Generate
                    </button>
                </div>

                <div class="col-md-8 video-progress-bar-wrap">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active video-upload-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                        </div>
                    </div>
                    <div class="vup-text"></div>
                </div>

                <div class="col-md-8 video-convert-result">
                    <a class="vcr-a" href="" target="_blank"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="container text-center">
        <h2>Upload or drag your file, then click play button.</h2>
    </div>


    <!-- add a link modal -->
    <div class="modal fade" id="video-add-link" tabindex="-1" role="dialog" aria-labelledby="video-add-link">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="gridSystemModalLabel">Add A Video Link</h4>
                </div>

                <div class="modal-body">
                    <div>
                        <ul>
                            <li><small><i>Youtube Link is supported.</i></small></li>
                        </ul>
                    </div>
                    <br>

                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-external-link"></i></div>
                            <input type="text" value="" placeholder="Video link ..." class="form-control video-add-link-input">
                        </div>
                    </div>             
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary video-add-link-button">Submit</button>
                </div>
            </div>
        </div>
    </div>


    <!-- info 1 -->
    <div class="wrap-3">
        <div class="container">
            <div class="col-md-5">
                <div class="description wp-desc">
                    <h4 class="header-text text-center">
                        <i class="fa fa-rocket"></i>
                        It's Fast
                    </h4>
                    <p>
                        By downloading the resource with a Personal License you are granted the use of it under the conditions featured in the above table. Ownership stays with Creative Tim, along with the copyright holders and you must abide the following rights and restrictions.
                    </p>
                    <p>
                        This pack is a demo of our latest product. You can download it and use it in any project of yours. 
                    </p>
                </div>
            </div>
            <div class="col-md-7">
               <div class="w2-img">
                    <img src="{% static 'images/mac2.png' %}">
               </div>
            </div>
        </div>
    </div>


    <!-- info 2 -->
    <div class="wrap-4">
        <div class="container">
            <div class="col-md-6">
                <div class="w2-img">
                     <img src="{% static 'images/mac3.jpg' %}">
                </div>
            </div>
            <div class="col-md-5 col-md-offset-1">
                <div class="description wp-desc">
                    <h4 class="header-text text-center">
                        <i class="fa fa-picture-o"></i>
                        It's Quality
                    </h4>
                    <p>
                        This pack is a demo of our latest product. You can download it and use it in any project of yours.
                    </p>
                    <p>
                        By downloading the resource with a Personal License you are granted the use of it under the conditions featured in the above table. Ownership stays with Creative Tim, along with the copyright holders and you must abide the following rights and restrictions.
                    </p>
                </div>
            </div>
        </div>
    </div>


    <!-- info 3 -->
    <div class="wrap-5">
        <div class="container">
            <div class="col-md-5">
                <div class="description wp-desc">
                    <h4 class="header-text text-center">
                        <i class="fa fa-simplybuilt"></i>
                        It's Simply
                    </h4>
                    <p>
                        This pack is a demo of our latest product. You can download it and use it in any project of yours.
                    </p>
                    <p>
                        By downloading the resource with a Personal License you are granted the use of it under the conditions featured in the above table. Ownership stays with Creative Tim, along with the copyright holders and you must abide the following rights and restrictions.
                    </p>
                </div>
            </div>
            <div class="col-md-6 col-md-offset-1">
                <div class="w2-img">
                     <img src="{% static 'images/mac4.jpg' %}">
                </div>
            </div>
        </div>
    </div>


    <!-- image scroll -->
    <div class="wrap-6">
        <div class="img-scroll-holder" data-image="{% static 'images/office-wallpaper.jpg' %}"></div>
    </div>


    <!-- carousel -->
    <div class="wrap-7 clearfix">
        <div class="container">
            <h3 class="text-center">
                <i class="fa fa-users"></i>
                Who Use It
            </h3>
            <div class="owl-carousel owl-theme">
                <div class="item">
                    <img src="{% static 'images/client-logo1.png' %}" >
                </div>
                <div class="item">
                    <img src="{% static 'images/client-logo2.png' %}" >
                </div>
                <div class="item">
                    <img src="{% static 'images/client-logo3.png' %}" >
                </div>
                <div class="item">
                    <img src="{% static 'images/client-logo4.png' %}" >
                </div>
                <div class="item">
                    <img src="{% static 'images/client-logo1.png' %}" >
                </div>
                <div class="item">
                    <img src="{% static 'images/client-logo2.png' %}" >
                </div>
                <div class="item">
                    <img src="{% static 'images/client-logo3.png' %}" >
                </div>
                <div class="item">
                    <img src="{% static 'images/client-logo4.png' %}" >
                </div>
            </div>
        </div>
    </div>

    <script src="{% static "js/sweetalert.min.js" %}"></script>
    <script src="{% static "js/owl.carousel.min.js" %}"></script>
    <script src="{% static "js/jquery.imageScroll.min.js" %}"></script>
    <script src="{% static "js/scrollreveal.min.js" %}"></script>
    <script src="{% static "js/pace.min.js" %}"></script>
    <script src="{% static "js/nouislider.min.js" %}"></script>
    <script src="{% static "js/wNumb.js" %}"></script>
    <script src="{% static "js/convert.js" %}"></script>
    <script type="text/javascript">    
        convert_home_js.bind();
        convert_home_js.init();     
    </script>
{% endblock %}
